<template>
  <div class="editor-wrapper">
    <div class="toolbar" v-if="editor">
      <button @click="toggleBold" :class="{ active: editor.isActive('bold') }"><b>B</b></button>
      <button @click="toggleItalic" :class="{ active: editor.isActive('italic') }"><i>I</i></button>
      <button @click="toggleStrike" :class="{ active: editor.isActive('strike') }"><s>S</s></button>
      <button @click="toggleCode" :class="{ active: editor.isActive('code') }">{<\/>}</button>
      <button @click="toggleHeading(1)" :class="{ active: editor.isActive('heading', { level: 1 }) }">H1</button>
      <button @click="toggleHeading(2)" :class="{ active: editor.isActive('heading', { level: 2 }) }">H2</button>
      <button @click="toggleBulletList" :class="{ active: editor.isActive('bulletList') }">• List</button>
      <button @click="toggleOrderedList" :class="{ active: editor.isActive('orderedList') }">1. List</button>
      <button @click="toggleBlockquote" :class="{ active: editor.isActive('blockquote') }">“ ”</button>
      <button @click="undo" :disabled="!editor.can().undo()">Undo</button>
      <button @click="redo" :disabled="!editor.can().redo()">Redo</button>
    </div>

    <editor-content :editor="editor" class="editor-content" />
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Code from '@tiptap/extension-code'
import Underline from '@tiptap/extension-underline'
import Strike from '@tiptap/extension-strike'
import Heading from '@tiptap/extension-heading'
import BulletList from '@tiptap/extension-bullet-list'
import OrderedList from '@tiptap/extension-ordered-list'
import Blockquote from '@tiptap/extension-blockquote'
import History from '@tiptap/extension-history'

import Collaboration from '@tiptap/extension-collaboration'
import CollaborationCursor from '@tiptap/extension-collaboration-cursor'

import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'

// 初始化 Yjs
const ydoc = new Y.Doc()
const provider = new WebsocketProvider('ws://localhost:1234', 'my-room', ydoc)
const awareness = provider.awareness

awareness.setLocalStateField('user', {
  name: '张三',
  color: '#f97316',
})

// 初始化编辑器
const editor = useEditor({
  extensions: [
    StarterKit.configure({
      history: false, // 用下面的 History 扩展
    }),
    Code,
    Underline,
    Strike,
    Heading.configure({ levels: [1, 2, 3] }),
    BulletList,
    OrderedList,
    Blockquote,
    History,
    Collaboration.configure({ document: ydoc }),
    CollaborationCursor.configure({
      provider,
      user: awareness.getLocalState().user,
    }),
  ],
  autofocus: true,
  content: '<p>欢迎使用协同编辑富文本！</p>',
})

function toggleBold() {
  editor.value.chain().focus().toggleBold().run()
}
function toggleItalic() {
  editor.value.chain().focus().toggleItalic().run()
}
function toggleStrike() {
  editor.value.chain().focus().toggleStrike().run()
}
function toggleCode() {
  editor.value.chain().focus().toggleCode().run()
}
function toggleHeading(level) {
  editor.value.chain().focus().toggleHeading({ level }).run()
}
function toggleBulletList() {
  editor.value.chain().focus().toggleBulletList().run()
}
function toggleOrderedList() {
  editor.value.chain().focus().toggleOrderedList().run()
}
function toggleBlockquote() {
  editor.value.chain().focus().toggleBlockquote().run()
}
function undo() {
  editor.value.chain().focus().undo().run()
}
function redo() {
  editor.value.chain().focus().redo().run()
}

onBeforeUnmount(() => {
  editor.value.destroy()
  provider.destroy()
})
</script>

<style scoped>
.editor-wrapper {
  max-width: 700px;
  margin: 1rem auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
  box-shadow: 0 0 10px rgb(0 0 0 / 0.05);
}

.toolbar {
  border-bottom: 1px solid #eee;
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  background: #fafafa;
}

.toolbar button {
  border: none;
  background: #f0f0f0;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.toolbar button.active {
  background-color: #f97316;
  color: white;
}

.toolbar button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.editor-content {
  min-height: 300px;
  padding: 1rem;
  outline: none;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.ProseMirror p {
  margin: 0 0 1em 0;
}

.ProseMirror h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5em;
}

.ProseMirror h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.ProseMirror blockquote {
  border-left: 4px solid #f97316;
  padding-left: 1rem;
  color: #666;
  font-style: italic;
  margin: 0 0 1em 0;
}

.ProseMirror code {
  background: #f5f5f5;
  border-radius: 3px;
  padding: 0 3px;
  font-family: "Fira Mono", monospace, monospace;
}

.ProseMirror ul,
.ProseMirror ol {
  padding-left: 1.4em;
  margin: 0 0 1em 0;
}

.ProseMirror li {
  margin-bottom: 0.3em;
}
</style>
